<template>
  <div class="contain ">
    <div class="option item-box">
      <div class="form">
        <div class="m-1 ml-10"><span>1、工器具清单</span></div>
        <el-form  :model="materailData" label-position="left" class="demo-form-inline m-l-20">
            <el-form-item label="清单" label-width="120px">
              <el-input class="shadow-lg"  :readonly="!isEdit" type="textarea" v-model="materailData.machine" />
            </el-form-item>
        </el-form>
      </div>
      <!-- <div class="right">
        <d-button @click="addNewItem(1)" v-show="isEdit" icon="icon-add" bsStyle="primary" bsSize="xs" title="add"
          shape="circle"></d-button>
      </div> -->
    </div>
    <div class="item-box">
      <div class="form">
        <div class="m-1 ml-10"><span>2、需用材料</span></div>
        <el-form  :model="materailData" label-position="left" class="demo-form-inline m-l-20">
          <el-form-item label="材料" label-width="120px">
            <el-input class="shadow-lg"  :readonly="!isEdit"  type="textarea" v-model="materailData.material" />
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="right" v-show="isEdit">
        <d-button @click="addNewItem(2)" icon="icon-add" bsStyle="primary" bsSize="xs" title="add"
          shape="circle"></d-button>
      </div> -->
    </div>
    <div class="item-box">
      <div class="form">
        <div class="m-1 ml-10"><span>3、需用人员</span></div>
        <el-form  :model="materailData"  label-position="left" class="demo-form-inline m-l-20">
          <el-form-item label="工种" label-width="120px">
            <el-input class="shadow-lg"  :readonly="!isEdit"  type="textarea" v-model="materailData.people" />
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="right" v-show="isEdit">
        <d-button @click="addNewItem(3)" icon="icon-add" bsStyle="primary" bsSize="xs" title="add"
          shape="circle"></d-button>
      </div> -->
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
interface optionForm {
  name: string,
  count: number,
  unit: string,
}
interface peopleForm {
  name: string,
  code: string,
}
interface Form {
  options: optionForm[],
  materails: optionForm[],
  peoples: peopleForm[],
  type: string,
  count: number
}
const formInline = ref<Form>({
  options: [{
    name: '生命绳',
    count: 124,
    unit: "条"
  }, {
    name: '活动扳手12',
    count: 2,
    unit: "把"
  }, {
    name: '拖线板380V',
    count: 1,
    unit: "个"
  }, {
    name: '焊机380V',
    count: 1,
    unit: "台"
  }, {
    name: '安全带',
    count: 4,
    unit: "条"
  }],
  materails: [{
    name: '常用材料',
    count: 1,
    unit: "-"
  }],
  peoples: [{
    name: '钳工',
    code: 'QG1、QG2、QG3、QG4'
  }, {
    name: '焊工',
    code: 'HJ1'
  }, {
    name: '起重',
    code: 'QZ1'
  }],
  type: '',
  count: 0
})
const deleteItem = (index: number, valIndex) => {
  if (valIndex == 1) {
    formInline.value.options.splice(index, 1)
  } else if (valIndex == 2) {
    formInline.value.materails.splice(index, 1)
  } else if (valIndex == 3) {
    formInline.value.peoples.splice(index, 1)
  }
}
const addNewItem = (index) => {
  let items = [{
    name: '',
    count: 1,
    unit: ''
  }, {
    name: '起重工',
    code: '1231',
  }]
  if (index == 1) {
    formInline.value.options.push(items[0])
  } else if (index == 2) {
    formInline.value.materails.push(items[0])
  } else if (index == 3) {
    formInline.value.peoples.push(items[1])
  }
}
const onSubmit = () => {
  console.log('submit!')
}
defineProps({
  isEdit: Boolean,
  materailData: Object
})

</script>

<style lang="less" scoped>
.contain {
  width: 100%;
  position: relative;
  // background-color: rgb(127, 161, 255);
  // background-image:linear-gradient(120deg,#a6c0fe 0%, #f68084 100%);
  .item-box {
    display: flex;
    flex-direction: row;

    .form {
      flex: 1;
    }

    .right {
      width: 60px;
    }
  }

  .bottom {
    float: right;
    // position: fixed;
    // bottom: 10px;
    // width: 80px;
    // margin: auto;
  }
}
// :deep(.el-textarea__inner){
//   background-image:linear-gradient(120deg,#a6c0fe 0%, #f68084 100%);

// }
</style>
